<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业</title>
	<style>
		.box{font-size:30px; 
			color:black; 
			width:300px;
			height: 100px;
			border:1px solid green;
			text-align: center;
			line-height:100px;
			margin:auto;   
		}
		.box:hover{background-color:orange; }
        .box ul{list-style-type:none;
        font-size:20px;
         color:red;
        width:300px; 
        padding-left:0;
        margin: 0 0 0 -1px;
        display:none; }
        .box ul li{
        	width:300px;
        	border:1px solid #999;
        	color:red;   
        }
        .box ul li:hover{
        	background-color:#999;
        	color:#fff;  

        }
        .box:hover ul{
        	display:block; 
        }
		
	</style>
</head>
<body>
	<div class="box">选择喜欢的俱乐部
		<ul>
			<li>皇家马德里</li>
			<li>尤文图斯</li>
			<li>拜仁慕尼黑</li>
			<li>马德里竞技</li>
			<li>巴塞罗那</li>
			<li>利物浦</li>
			<li>曼联</li>
		</ul>
	</div>
</body>
</html>